<script setup lang="ts">
const users = [
  {
    name: '张三',
    avatar: 'https://picsum.photos/200/300?random=1',
  },
  {
    name: '李四',
    avatar: 'https://picsum.photos/200/300?random=2',
  },
  {
    name: '王五',
    avatar: 'https://picsum.photos/200/300?random=3',
  },
]
</script>

<template>
  <div class="chat-user">
    <div class="chat-user-title">
      <span> 在线人数：0 </span>
    </div>
    <!-- 群成员列表 -->
    <ul class="chat-user-list">
      <li v-for="(user, index) in users" :key="index" class="chat-user-item">
        <el-image
          style="width: 28px; height: 28px"
          :src="user.avatar"
          :fit="'cover'"
          class="chat-user-avatar"
        >
          <!--在线标识-->
          <div class="chat-user-online"></div>
        </el-image>
        <span class="user-name">{{ user.name }}</span>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
.chat-user {
  margin-left: 20px;
  color: white;
  background-color: #323644;
  padding: 10px;
  border-radius: 10px;

  .chat-user-title {
    width: 200px;
    font-size: 16px;
    margin-bottom: 10px;
  }

  .chat-user-list {
    width: 200px;

    .chat-user-item {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      border-radius: 5px;
      padding: 5px 2px;

      .chat-user-avatar {
        border-radius: 50%;
        .chat-user-online {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 8px;
          height: 8px;
          background-color: green;
          border-radius: 50%;
          border: 2px solid #323644; /* 边框颜色与背景色一致 */
        }
      }

      .user-name {
        margin-left: 10px;
      }
    }

    .chat-user-item:hover {
      background-color: #5b5e69;
    }
  }
}
@media (max-width: 768px) {
  .chat-user {
    display: none;
  }
}
</style>
